<!DOCTYPE html>
<html>
	{include file="head.html"}
	<link href="/plugin/skyweb/skyweb.css" rel="stylesheet" type="text/css" />
	<style>
		.uiList{
			height: 480px;
			overflow-y:scroll ;
		}
		.uiList-item{
			float: left;
			width: 140px;
			background-color: #eee;
			padding: 5px;
			cursor: pointer;
			margin-bottom: 10px;
		}
		.uiList-item.active{
			background-color: #ccc;
			border: 1px solid #f60;
		}
		.uiList-img{
			width: 100%;
		}
		.uiList .title{
			color: #444;
			font-size: 14px;
			margin-bottom: 5px;
		}
		.uiList .desc{
			color: #666;
			font-size: 12px;
		}
	</style>
	<body>
		<div class="tophd">
			组件编辑
			<div class="back goBack">返回</div>
			<div class="refresh js-refresh">刷新</div>
		</div>
		<div class="main-body">
			<form action="/admin.php?m=diy_uicompent&a=save">
				<input type="hidden" name="ucid" id="ucid" value="0" /> 
				<table class="table table-add">
					<tr>
						<td>UI组件</td>
						<td>
							<div class="uiList">
								{foreach item=c from=$uiList}
								<div class="uiList-item" data-ucid="{$c.id}">
									<img class="uiList-img" src="{$c.imgurl|images_site}"/>
									<div class="title">
										{$c.title}
									</div>
									<div class="desc">
										{$c.description}
									</div>
								</div>
								{/foreach}
							</div>
						</td>
					</tr>
					<tr>
						<td width="100">名称</td>
						<td>
							<input type="text" name="title" value="{$data.title}" />
						</td>
					</tr>
					<tr>
						<td>标签</td>
						<td>
							<input type="text" name="tag" value="{$data.tag}" />
						</td>
					</tr>
			 
					<tr>
						<td></td>
						<td><div class="btn btn-success js-submit">保存</div></td>
					</tr>
				</table>
				 
				
			</form>
		
		</div>
	<script src="/plugin/jquery/masonry.pkgd.min.js"></script>
	<script src="/plugin/jquery/imagesloaded.pkgd.min.js"></script>
 
    <script>
			$(function(){
				var $grid=$(".uiList");
				$grid.imagesLoaded( function() {
					$grid.masonry({	  
						itemSelector: '.uiList-item',
						columnWidth: 150
					});
				});
	 
				
				$(document).on("click",".uiList-item",function(){
					var ucid=$(this).attr("data-ucid");
					$(this).addClass("active").siblings().removeClass("active");
					$("#ucid").val(ucid);
				})
				
			})
 
 		
 	</script>
	</body>
</html>
